@charset "UTF-8";
@import "./variables.scss";
@import "./base.scss";
@import "./wx-public.scss";


.myself {
    .header {
        width: 100%;
        height: 96 * $base-width;
        padding-top: 12 * $base-width;
        background-color: #fff;
        padding-left: 15 * $base-width;
        padding-right: 16 * $base-width;
        display: flex;
        justify-content: space-between;
        .left {
            padding-top: 8 * $base-width;
            display: flex;
            justify-content: flex-start;
            img {
                width: 64 * $base-width;
                height: 64 * $base-width;
                margin-right: 15 * $base-width;
            }
            .userinfo {
                p {
                    font-family: PingFangSC-Medium;
                    font-size: 17 * $base-width;
                    color: #222222;
                    font-weight: 700;
                }
                span {
                    display: block;
                    font-family: PingFangSC-Regular;
                    font-size: 13 * $base-width;
                    margin-top: 5 * $base-width;
                    color: #999999;
                }
            }
        }
        .right {
            display: flex;
            align-items: center;
            height: 100%;
            color: #ccc;
            padding-bottom: 10 * $base-width;
        }
    }
    .items {
        width: 100%;
        height: 50 * $base-width;
        line-height: 50 * $base-width;
        display: flex;
        justify-content: flex-start;
        background-color: #fff;
        margin-top: 12 * $base-width;
        .icon {
            width: 52 * $base-width;
            height: 100%;
            line-height: 50 * $base-width;
            text-align: center;
            color: #FFBF00;
            i {
                font-size: 22 * $base-width;
            }
        }
        .border {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-right: 16 * $base-width;
            .left {
                font-family: PingFangSC-Regular;
                font-size: 17 * $base-width;
                color: #222222;
            }
            .right {
                font-family: PingFangSC-Regular;
                font-size: 15 * $base-width;
                color: #999999;
            }
        }
        &.collect {
            .icon {
                color: #F5A200;
            }
            .border {
                border-bottom: 1px solid  #E5E5E5;
            }
        }
        &.reflect {
            margin-top: 0;
            .icon {
                color: #E55435;
            }
        }
        &.active {
            .icon {
                color:#8BC34A;
            }
            .border {
                border-bottom: 1px solid  #E5E5E5;
            }
        }
        &.baby {
            margin-top: 0;
            .icon {
                color: #4CAF50;
            }
            .border {
                border-bottom: 1px solid  #E5E5E5;
            }
        }
        &.message {
            margin-top: 0;
            .icon {
                color: #009688;
            }
        }
        &.journal {
            .icon {
                color: #D32F2F ;
            }
        }
        &.set {
            .icon {
                color: #666;
            }
        }
    }
}
// 我的积分

.integral {
    .header {
        width: 100%;
        height: 160 * $base-width;
        background-image: url('/static/img/back@3x.png');
        .top {
            width: 100%;
            height: 44 * $base-width;
            line-height: 44 * $base-width;
            position: relative;
            font-family: PingFangSC-Semibold;
            font-size: 17 * $base-width;
            color: #FFFFFF;
            text-align: center;
            .icon {
                width: 40 * $base-width;
                height: 100%;
                font-size: 22 * $base-width;
                position: absolute;
                left: 16 * $base-width;
                top: 0;
                text-align: left;
            }
        }
        .bot {
            width: 100%;
            height: 116 * $base-width;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
                font-family: PingFangSC-Semibold;
                font-size: 48 * $base-width;
                color: #FFFFFF;
                text-align: center;
                i {
                    font-size: 22 * $base-width;
                    margin-left: 8 * $base-width;
                }
            }
        }
    }
    .detail {
        min-height: calc(100vh - 160 * #{$base-width});
        background-color: #fff;
        padding: 0 15 * $base-width;
        .title {
            height: 49 * $base-width;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .border {
                width: 130 * $base-width;
                height: 1 * $base-width;
                background-color: #E5E5E5;
            }
            .center {
                font-family: PingFangSC-Regular;
                font-size: 15 * $base-width;
                color: #999999;
                text-align: center;
            }
        }
        .intro {
            width: 100%;
            height: 60 * $base-width;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #E5E5E5;
            .left {
                padding-top: 8 * $base-width;
                // display: flex;
                width: 80%;
                // flex-direction: column;
                // justify-content: space-around;
                p {
                    font-family: PingFangSC-Regular;
                    font-size: 15 * $base-width;
                    color: #222222;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                span {
                    font-family: PingFangSC-Regular;
                    font-size: 13 * $base-width;
                    color: #999999;
                }
            }
            .right {
                width: 20%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: PingFangSC-Medium;
                font-size: 17 * $base-width;
                color: #D32F2F;
                text-align: right;
            }
        }
    }
}

//我的收藏

.collect {
    .header {
        width: 100%;
        height: 44 * $base-width;
        background-color: #fff;
        line-height: 44 * $base-width;
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-size: 17 * $base-width;
        color: #323334;
        text-align: center;
        position: relative;
        box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.3);
        .icon {
            width: 40 * $base-width;
            height: 100%;
            text-align: left;
            position: absolute;
            left: 16 * $base-width;
            i {
                font-size: 22 * $base-width;
            }
        }
    }
    .title {
        width: 100%;
        background-color: #fff;
        height: 44 * $base-width;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07);
        .item {
            float: left;
            width: 33.33%;
            text-align: center;
            height: 44 * $base-width;
            line-height: 44 * $base-width;
            font-family: PingFangSC-Regular;
            font-size: 15 * $base-width;
            color: #222222;
            text-align: center;
            &.active {
                color: #D32F2F;
                border-bottom: 1px solid #D32F2F;
            }
        }
    }
    .news {
        min-height: calc(100vh - 88 * #{$base-width});
        background-color: #fff;
        padding-left: 15 * $base-width;
        padding-right: 15 * $base-width;
        display: none;
        .item {
            padding-top: 15 * $base-width;
            padding-bottom: 15 * $base-width;
            width: 100%;
            height: 102 * $base-width;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #E5E5E5;
            .left {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                max-width: 68%;
                p {
                    font-family: PingFangSC-Regular;
                    font-size: 17 * $base-width;
                    color: #222222;
                    letter-spacing: 0.2px;
                }
                span {
                    font-family: PingFangSC-Regular;
                    font-size: 13 * $base-width;
                    color: #999999;
                    letter-spacing: 0.16px;
                }
            }
            .right {
                width: 96 * $base-width;
                height: 72 * $base-width;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 5 * $base-width;
                }
            }
        }
    }
    .active {
        min-height: calc(100vh - 88 * #{$base-width});
        background-color: #fff;
        padding-left: 15 * $base-width;
        padding-right: 15 * $base-width;
        display: none;
        .item {
            width: 100%;
            height: 256 * $base-width;
            border-bottom: 1px solid #E5E5E5;
            .img {
                width: 100%;
                height: 194 * $base-width;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                margin-top: 8 * $base-width;
                font-family: PingFangSC-Regular;
                font-size: 17 * $base-width;
                color: #222222;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .baby {
        width: 100%;
        min-height: calc(100vh - 88 * #{$base-width});
        padding: 15 * $base-width 15 * $base-width 0;
        // display: flex;
        // justify-content: space-between;
        // flex-wrap: wrap;
        background-color: #fff;
        .tip {
            min-height: calc(100vh - 88 * #{$base-width});
            background-color: #fff;
            text-align: center;
            padding-top: 80 * $base-width;
            display: none;
            img {
                width: 63 * $base-width;
                height: 52 * $base-width;
            }
            p {
                margin-top: 5 * $base-width;
                text-align: center;
                font-family: PingFangSC-Regular;
                font-size: 16 * $base-width;
                color: #CCCCCC;
            }
        }
        .item {
            width: 47%;
            height: 253 * $base-width;
            max-height: 253 * $base-width;
            .img {
                width: 100%;
                height: 165 * $base-width;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 5 * $base-width;
                }
            }
            p {
                width: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                font-family: PingFangSC-Regular;
                font-size: 15 * $base-width;
                color: #222222;
            }
            .price {
                margin-top: 5 * $base-width;
                display: flex;
                justify-content: space-between;
                span {
                    font-family: PingFangSC-Medium;
                    font-size: 15 * $base-width;
                    color: #D32F2F;
                }   
                i {
                    font-style: normal;
                    font-family: PingFangSC-Regular;
                    font-size: 13 * $base-width;
                    color: #999999;
                    text-align: right;
                }
            }
            &:nth-child(n) {
                float: left;
            }
            &:nth-child(2n) {
                float: right;
            }
        }
    }
}

// 我的反应
.reflect {
    .header {
        width: 100%;
        height: 44 * $base-width;
        background-color: #fff;
        line-height: 44 * $base-width;
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-size: 17 * $base-width;
        color: #323334;
        text-align: center;
        position: relative;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07);
        .icon {
            width: 40 * $base-width;
            height: 100%;
            text-align: left;
            position: absolute;
            left: 16 * $base-width;
            i {
                font-size: 22 * $base-width;
            }
        }
    }
    .plate {
        background-color: #fff;
        padding: 15 * $base-width;
        padding-bottom: 0;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                font-family: PingFangSC-Medium;
                font-size: 17 * $base-width;
                color: #222222;
                span {
                    padding: 1 * $base-width 10 * $base-width;
                    height: 20 * $base-width;
                    font-family: PingFangSC-Regular;
                    font-size: 12 * $base-width;
                    // color: #7ED321;
                    text-align: center;
                    border-radius: 4 * $base-width;
                    font-weight: 500;
                    &.wait {
                        color: #7ED321;
                        border: 1px solid #7ED321;
                    }
                    &.already {
                        color: #ccc;
                        border: 1px solid #ccc;
                    }
                }
            }   
            .right {
                font-family: PingFangSC-Regular;
                font-size: 13 * $base-width;
                color: #999999;
                text-align: right;
            }
        }
        .problem {
            margin-top: 20 * $base-width;
            font-family: PingFangSC-Regular;
            font-size: 15px;
            color: #222222;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
         
            margin-bottom: 12 * $base-width;
        }
        .border {
            height: 1px;
            background-color: #E5E5E5;
        }
        .box {
            margin-top: 21 * $base-width;
            display: flex;
            justify-content: flex-end;
        }
        .answer {
            
            font-family: PingFangSC-Regular;
            font-size: 15 * $base-width;
            color: #999999;
            margin-top: 12 * $base-width;
            padding-bottom: 20 * $base-width;
            margin-bottom: 15 * $base-width;
            .answers {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .evaluate {
                width: 80 * $base-width;
                height: 32 * $base-width;
                line-height: 32 * $base-width;
                text-align: center;
                // float: right;
                background: #FFFFFF;
                border: 1px solid #D32F2F;
                border-radius: 6px;
                color: #D32F2F; 
            }
        }
    }
}

// 反映详情
.reflectdetail {
    .box {
        width: 100%;
        position: fixed;
        bottom: 8 * $base-width;
        padding: 0 8 * $base-width;
        .evaluate {
         width:100%;
         height: 44 * $base-width;
         line-height: 44 * $base-width;
         text-align: center;
         // float: right;
         background: #FFFFFF;
         border: 1px solid #D32F2F;
         border-radius: 6px;
         color: #D32F2F; 
        }
    }
    .header {
        width: 100%;
        height: 44 * $base-width;
        background-color: #fff;
        line-height: 44 * $base-width;
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-size: 17 * $base-width;
        color: #323334;
        text-align: center;
        position: relative;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07);
        .icon {
            width: 40 * $base-width;
            height: 100%;
            text-align: left;
            position: absolute;
            left: 16 * $base-width;
            i {
                font-size: 22 * $base-width;
            }
        }
    }
    .plate {
        min-height: calc(100vh - 59 * #{$base-width});
        background-color: #fff;
        padding: 15 * $base-width;
        padding-bottom: 0;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                font-family: PingFangSC-Medium;
                font-size: 17 * $base-width;
                color: #222222;
                span {
                    padding: 1 * $base-width 10 * $base-width;
                    height: 20 * $base-width;
                    font-family: PingFangSC-Regular;
                    font-size: 12 * $base-width;
                    // color: #7ED321;
                    text-align: center;
                    border-radius: 4 * $base-width;
                    font-weight: 500;
                    &.wait {
                        color: #7ED321;
                        border: 1px solid #7ED321;
                    }
                    &.already {
                        color: #ccc;
                        border: 1px solid #ccc;
                    }
                }
            }   
            .right {
                font-family: PingFangSC-Regular;
                font-size: 13 * $base-width;
                color: #999999;
                text-align: right;
            }
        }
        .problem {
            margin-top: 20 * $base-width;
            .problemdetail {
                font-family: PingFangSC-Regular;
                font-size: 15px;
                color: #222222;
                margin-bottom: 15 * $base-width;
            }
            .img {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                margin-bottom: 15 * $base-width;
                img {
                    width: 80 * $base-width;
                    height: 80 * $base-width;
                    margin-right: 5 * $base-width;
                    margin-bottom: 8 * $base-width;
                }
            }
            .address {
                font-family: PingFangSC-Regular;
                font-size: 15 * $base-width;
                color: #999999;
                margin-bottom: 15 * $base-width;
            }
            .phone {
                font-family: PingFangSC-Regular;
                font-size: 15 * $base-width;
                color: #999999;
                margin-bottom: 15 * $base-width;
            }
        }
        .border {
            height: 1px;
            background-color: #E5E5E5;
        }
        .box {
            margin-top: 21 * $base-width;
            display: flex;
            justify-content: flex-end;
        }
        .answer {
            font-family: PingFangSC-Regular;
            font-size: 15 * $base-width;
            color: #999999;
            margin-top: 12 * $base-width;
            padding-bottom: 20 * $base-width;
            margin-bottom: 15 * $base-width;
            padding-left: 40 * $base-width;
            position: relative;
            .left {
                width: 30 * $base-width;
                padding: 10 * $base-width 0;
                // height: 52 * $base-width;
                font-family: PingFangSC-Regular;
                font-size: 15 * $base-width;
                color: #D32F2F;
                text-align: center;
                background: #FFDEDE;
                border-radius: 6 * $base-width;
                position: absolute;
                left: 0;
            }
        }
    }
    .weui-popup__modal {
        padding: 0 20 * $base-width;
        background-color: #fff;
        h4 {
            width: 100%;
            height: 44 * $base-width;
            line-height: 44 * $base-width;
            text-align: center;
            font-family: PingFangSC-Medium;
            font-size: 17 * $base-width;
            color: #222222;
            text-align: center;
            position: relative;
            i {
                position: absolute;
                left: 0;
                color: #999
            }
        }
        .title {
            margin-top: 20 * $base-width;
            font-family: PingFangSC-Regular;
            font-size: 15 * $base-width;
            color: #222222;
        }
        .imgs {
            margin-top: 25 * $base-width;
            padding: 0 30 * $base-width;
            display: flex;
            justify-content: space-between;
            .img {
                width: 33.33%;
                text-align: center;
                height: 90 * $base-width;
                img {
                    width: 64 * $base-width;
                    height: 50 * $base-width;
                    margin-bottom: 16 * $base-width;
                }
                p {
                    font-family: PingFangSC-Regular;
                    font-size: 15 * $base-width;
                    color: #666666;
                    letter-spacing: 0.18px;
                    text-align: center;
                }
            }
        }
        .confirm {
            margin-top: 40 * $base-width;
            padding: 0 10 * $base-width;
            background-color: #fff;
            background: #D32F2F;
            border-radius: 6 * $base-width;
            width: 100%;
            height: 44 * $base-width;
            line-height: 44 * $base-width;
            text-align: center;
            color: #fff;
            margin-bottom: 30 * $base-width;
        }
    }
}

// 我的活动
.myactive {
    .header {
        width: 100%;
        height: 44 * $base-width;
        background-color: #fff;
        line-height: 44 * $base-width;
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-size: 17 * $base-width;
        color: #323334;
        text-align: center;
        position: relative;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07);
        .icon {
            width: 40 * $base-width;
            height: 100%;
            text-align: left;
            position: absolute;
            left: 16 * $base-width;
            i {
                font-size: 22 * $base-width;
            }
        }
    }
    .acdetail {
        min-height: calc(100vh - 44 * #{$base-width});
        background-color: #fff;
        padding: 0 15 * $base-width;
        .item {
            display: flex;
            justify-content: flex-start;
            padding: 15 * $base-width 0;
            align-items: center;
            border-bottom: 1px solid #E5E5E5;
            .left {
                width: 110 * $base-width;
                height: 100%;
                display: flex;
                align-items: center;
                border-radius: 5 * $base-width;
                margin-right: 15 * $base-width;
                img {
                    width: 100%;
                    height: 62 * $base-width;
                }
            }
            .right {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title {
                    font-family: PingFangSC-Regular;
                    font-size: 15 * $base-width;
                    color: #222222;
                }
                .time {
                    display: flex;
                    justify-content: space-between;
                    span {
                        font-family: PingFangSC-Regular;
                        font-size: 15 * $base-width;
                        color: #999999;
                    }
                    .status {
                        font-family: PingFangSC-Regular;
                        font-size: 15 * $base-width;
                        color: #999;
                        &.already {
                            color: #7ED321;
                        }
                    }
                }
            }
        }
    }
}